<template>
  <section class="component message-contact-list">
    <el-table :data="dataSet" border :span-method="spanMethod">
      <el-table-column type="index" label="序号" :min-width="$helper.getColumnWidth(4)">
      </el-table-column>
      <el-table-column prop="caseNumber" label="订单编号" :min-width="$helper.getColumnWidth(4)">
      </el-table-column>
      <el-table-column prop="contName" label="联系人姓名" :min-width="$helper.getColumnWidth(4)">
      </el-table-column>
      <el-table-column prop="relation" label="关系" :min-width="$helper.getColumnWidth(2)" :formatter="(row) => $filter.dictConvert(row.relation, 'Relationship')">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" :min-width="$helper.getColumnWidth(3)">
      </el-table-column>
      <el-table-column prop="phoneStatus" label="状态" :min-width="$helper.getColumnWidth(2)" :formatter="(row) => $filter.dictConvert(row.phoneStatus, 'PhoneStatus')">
      </el-table-column>
      <el-table-column label="操作" :min-width="$helper.getColumnWidth(4)">
        <template slot-scope="scope">
          <el-button type="text" @click="addContact(scope.row)">增加联系人</el-button>
          <el-button type="text" @click="removeContact(scope)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </section>
</template>


<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component';
import { Dependencies } from '~/core/decorator';
import { State, namespace } from "vuex-class";
import { Emit, Prop, Model, Watch } from 'vue-property-decorator';
import DataBox from "~/components/common/data-box.vue";
import { SmartCollectionService } from "~/services/domain-service/smart-collection.service";
import { CaseOperatorPageService } from '~/services/domain-service/case-operator-page.service';
const MessageCollectionModule = namespace('message-collection')

@Component({
  components: {
    DataBox
  }
})
export default class MessageContactList extends Vue {
  @Dependencies(SmartCollectionService)
  private smartCollectionService: SmartCollectionService
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService
  @MessageCollectionModule.State
  private checkRelation: any[]
  @MessageCollectionModule.State
  private caseIdList: any[]

  private dataSet: any[] = []
  private contactData: any

  public refreshData() {
    const request: any = {
      caseIdList: this.caseIdList,
      relationshipSet: this.checkRelation,
    }
    this.smartCollectionService.getPersonalContacts(request).subscribe(
      data => this.dataSet = data || []
    )
  }

  @Emit('on-change')
  private onChange(val) { }
  @Watch('dataSet')
  private watchDataSet(val) {
    this.onChange(val)
  }

  /**
   * 添加手机号
   */
  private addContact(data: any) {
    this.contactData = data
    this.$prompt('请输入手机号码', '', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: this.$validator.regex.phoneNumber,
      inputErrorMessage: '手机号码格式不正确'
    }).then(({ value }: any) => {
      const request: any = {
        caseId: data.caseId,
        contName: data.contName,
        dataSource: 'REPAIR',
        phone: value,
        phoneType: 'MOBILE',
        relation: data.relation
      }
      this.caseOperatorPageService.addPersonalContact(request).subscribe(
        data => {
          this.refreshData()
          this.$message.success('添加成功')
        }
      )
    }).catch(() => {
      this.$message.info('取消输入')
    });

  }

  /**
   * 移除联系人
   */
  private removeContact(scope: any) {
    const index: number = scope.$index
    this.dataSet.splice(index, 1)
  }

  /**
   * 合并行
   */
  private spanMethod({ row, column, rowIndex, columnIndex }) {

    const columnProperty = 'caseNumber'
    if (column.property !== columnProperty) return
    // 当前单元格的值
    const currentValue = row[columnProperty]
    const span = {
      rowspan: 0,
      colspan: 0
    }
    const beforRow = rowIndex > 0 ? this.dataSet[rowIndex - 1] : null
    if (beforRow && beforRow[columnProperty] === currentValue) return span

    // 如果当前单元格的值与上一行的对应单元格的值一致，则合并行已经计算过
    span.colspan = 1
    span.rowspan = 1
    let nextRowIndex = rowIndex + 1
    while (nextRowIndex < this.dataSet.length) {
      // 如果下一行对应单元格的值与当前单元格的值一致
      const nextRowValue = this.dataSet[nextRowIndex][columnProperty]
      if (nextRowValue === currentValue) span.rowspan += 1
      nextRowIndex += 1
    }
    return span
  }

}
</script>
<style lang="less">
.component.message-contact-caseIdList {
  min-height: 300px;
  overflow-y: auto;
}
</style>

